<template>
	<!-- 商品分类 -->
	<view :style="colorStyle">
		<template2 :level="level" :showType="activeIndex" :isFooter="isFooter" ref="classTwo"></template2>
		<!-- 商品分类的三种样式布局 pdHeight:自定义导航diy设置的上下边距 -->
		<!-- <template1 v-if="activeIndex == 0" :level="level" :isFooter="isFooter" :pdHeight="pdHeight" ref="classOne"></template1> -->
		<!-- 	<template2 v-if="showTemplateTwo"  :level="level" :showType="activeIndex" :isFooter="isFooter" ref="classTwo"></template2>
		<template3 v-if="showTemplateThree" :showType="activeIndex" :isFooter="isFooter" ref="classThree"></template3>
		<template4 v-if="showTemplateFour"  :level="level" :isFooter="isFooter" :pdHeight="pdHeight" @toggleBar="toggleBar" ref="classFour"></template4>
		<pageFooter @newDataStatus="newDataStatus" v-show="showBar"></pageFooter> -->
		<pageFooter @newDataStatus="newDataStatus" v-show="showBar"></pageFooter>
	</view>
</template>

<script>
	import colors from "@/mixins/color";
	import template2 from './template/template2.vue';
	import pageFooter from '@/components/pageFooter/index.vue'
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['isLogin', 'uid', 'diyCategory', 'cartNum']),
			//diyCategory 暴露两个属性 level 和 index ,分别为分类等级和模板下标
			level() {
				return this.diyCategory.level
			},
			activeIndex() {
				return this.diyCategory.index
			},
			showTemplateTwo() {
				// 仅保留模板二，页面模板已固定为 template2
				return true
			}
		},
		components: {
			template2,
			pageFooter
		},
		mixins: [colors],
		provide() {
			return {
				parent: this
			}
		},
		onShow() {
			uni.removeStorageSync("store_id")
			if (this.cartNum > 0) {
				uni.setTabBarBadge({
					index: 3,
					text: this.cartNum > 99 ? '99+' : this.cartNum + ''
				})
			} else {
				uni.hideTabBarRedDot({
					index: 3
				})
			}
			setTimeout((res) => {
				this.$refs.classTwo && this.$refs.classTwo.getCartNum()
			}, 100)
		},
		data() {
			return {
				isFooter: false,
				showBar: false,
				pdHeight: 0
			}
		},
		methods: {
			// 商品详情页添加商品，返回详情页时要跟新购物车数据（为了页面效果返回时禁止调用接口）
			otherFun(e) {
				if (!!e) {
					this.$refs.classTwo && this.$refs.classTwo.updateFun(e)
				}
			},
			newDataStatus(val, num) {
				this.isFooter = val ? true : false;
				this.showBar = val ? true : false;
				this.pdHeight = num;
			},
			toggleBar(val) {
				this.showBar = val;
			},
		},
		onPageScroll(e) {
			uni.$emit('scroll', e.scrollTop);
		},
		onReachBottom() {
			uni.$emit('onReachBottom');
		}
	}
</script>